<template>
  <div class="nav-bottom fixed-bottom">
    <ul class="nav-bottom__list">			
			<li class="nav-bottom__item" :class="{'active':selected == 'physioArtificerMy'}">
        <router-link to="physioArtificerMy" replace>
					<img v-if="selected == 'physioArtificerMy'" class="item-icon"  src="@/assets/images/physio/tab_home2.png" />
					<img v-else class="item-icon" src="@/assets/images/physio/tab_home.png" />
          <p>首页</p>
        </router-link>
      </li>
      <li class="nav-bottom__item" :class="{'active':selected == 'physioArtificerOrderList'}">
        <router-link to="physioArtificerOrderList" replace>
					<img v-if="selected == 'physioArtificerOrderList'" class="item-icon" src="@/assets/images/physio/tab_order2.png" />
					<img v-else class="item-icon" src="@/assets/images/physio/tab_order.png" />
          <p>订单</p>
        </router-link>
      </li>
			<li class="nav-bottom__item" :class="{'active':selected == 'physioArtificerTimeSetting'}">
        <router-link to="physioArtificerTimeSetting" replace>
					<img v-if="selected == 'physioArtificerTimeSetting'" class="item-icon"  src="@/assets/images/physio/tab_clock2.png" />
					<img v-else class="item-icon" src="@/assets/images/physio/tab_clock.png" />
          <p>接单时间</p>
        </router-link>
      </li>
			<li class="nav-bottom__item" :class="{'active':selected == 'usercard'}">
        <div @click="goMy" >
					<img v-if="selected == 'usercard'"  class="item-icon" src="@/assets/images/physio/tab_my2.png" />
					<img v-else class="item-icon" src="@/assets/images/physio/tab_my.png" />
          <p>我的</p>
				</div>
      </li>
    </ul>
  </div>
</template>

<script>
import { GetArtificerInfo } from 'api/physio'
export default {
  data() {
    return {
      selected: '',
			id: 0,
    }
  },
  created() {
    // 获取当前路由名称，根据该名称给当前nav添加类名active
    this.selected = this.$route.name
		this.GetArtificerInfo()
  },
	methods: {
		GetArtificerInfo(){
			GetArtificerInfo().then(res => {
				if(res){
					this.id = res.Data.UserId
				}
			})
		},
		goValuationList(){
			this.$router.push({
         path: '/physioValuationList',
				 query: {
            id: this.id,
						isArtificer: true
        	}
       })
		},
		goMy(){
			window.location.href = this.$LocalDomain + '/m/retail/usercenter'
		},
	}

}
</script>
<style lang="scss" scoped>
	.nav-bottom {
		width: 100%;
		height: 120px;
		margin: auto;
		background: $colorBg;
	}

	.nav-bottom__list {
		height: 100%;
		@extend %flex-basic;
		@include flex-content(center, center);
	}

	.nav-bottom__item {
		flex: 1;
		text-align: center;
		font-size: 24px;
		color: $color9;
		.svg-icon {
			font-size: 36px;
		}
		.camera {
			width: 100px;
			height: 100px;
			margin: auto;
			border: 2px solid #929292;
			border-radius: 50%;
			@extend %flex-basic;
			@include flex-content(center, center);
			.camera_img {
				width: 50px;
				height: 50px;
			}
		}
	}

	.nav-bottom__item.active {
		color: $physio-primary1;
	}

	a {
		color: inherit;
	}
	img{
		width: 48px;
	}
	.item-icon{
		width: 48px;
		height: 48px;
	}
</style>

